<template>
  <div class="time-plan">
    <article class="time-article">
      <div class="time-left">
        <ul>
          <li v-for="(item, index) in weeks" :key="index">{{ item.label }}</li>
        </ul>
      </div>
      <div class="time-right">
        <ul class="time-head">
          <li v-for="item in hours" :key="item" :class="{ numTwo: item >= 9 }">{{ item - 1 }}</li>
        </ul>
        <ul class="time-container">
          <li v-for="(line, index) in weeks" :key="`line${index}`">
            <span
              v-for="row in hours"
              :key="`row${row}`"
              :class="{ active: dealActive(line.value, row - 1) }"
              @click="handleSpan(line.value, row - 1)"
            ></span>
          </li>
        </ul>
      </div>
    </article>
    <div class="time-btn">
      <el-button type="primary" plain @click="handleAll">区域全选</el-button>
      <el-button type="danger" plain @click="handleDelete">删除全部</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'timePlan',
  model: {
    prop: 'result',
    event: 'change'
  },
  props: {
    result: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      weeks: [
        {
          label: '周一',
          value: 'monday'
        },
        {
          label: '周二',
          value: 'tuesday'
        },
        {
          label: '周三',
          value: 'wednesday'
        },
        {
          label: '周四',
          value: 'thursday'
        },
        {
          label: '周五',
          value: 'friday'
        },
        {
          label: '周六',
          value: 'saturday'
        },
        {
          label: '周日',
          value: 'sunday'
        }
      ],
      hours: 24,
      list: this.result
    }
  },
  watch: {
    list (newVal) {
      this.$emit('change', newVal)
    }
  },
  methods: {
    // 生成choose class
    dealActive (line, row) {
      return this.list[line].indexOf(row) !== -1
    },
    // 点击切换选中
    handleSpan (line, row) {
      const list = Object.assign({}, this.list)
      let arr = Object.assign([], list[line])
      if (!arr.length || arr.indexOf(row) === -1) {
        list[line].push(row)
      } else {
        arr.splice(arr.indexOf(row), 1)
        list[line] = arr
      }
      this.list = list
    },
    handleAll () {
      const list = Object.assign({}, this.list)
      let arr = []
      for (var i = 0; i < 24; i++) {
        arr.push(i)
      }
      Object.keys(list).map(key => {
        list[key] = arr
      })
      this.list = list
    },
    handleDelete () {
      const list = Object.assign({}, this.list)
      Object.keys(list).map(key => {
        list[key] = []
      })
      this.list = list
    }
  }
}
</script>
<style lang="scss" scoped>
ul,
li {
  list-style: none;
  padding: 0;
  margin: 0;
}

.time-plan {
  width: 100%;
  min-width: 700px;
  padding: 10px 20px;
  box-sizing: border-box;
}

.time-article {
  width: 100%;
  display: flex;
  .time-left {
    width: 40px;
    margin-top: 30px;
    line-height: 24px;
  }
  .time-right {
    flex: 1;
  }
}

.time-head {
  line-height: 30px;
  display: flex;
  li {
    flex: 1;
    text-indent: -4px;
    &.numTwo {
      text-indent: -10px;
    }
  }
}

.time-container {
  border-top: 1px solid #d4d4d4;
  border-left: 1px solid #d4d4d4;
  li {
    display: flex;
  }
  span {
    flex: 1;
    height: 24px;
    border-bottom: 1px solid #d4d4d4;
    border-right: 1px solid #d4d4d4;
    box-sizing: border-box;
    background-color: #c6eef6;
    cursor: pointer;
    &.active {
      background-color: #409eff;
    }
  }
}

.time-btn {
  margin-top: 10px;
  text-align: right;
}
</style>
